<!--  -->
<template>
  <div class="update-address">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="title"
      left-text="返回"
      right-text="取消"
      left-arrow
      fixed
      :z-index="999"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="content">
      <van-address-edit
        :area-list="areaList"
        :address-info="addressInfo"
        show-postal
        show-set-default
        show-delete
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        tel-maxlength="11"
        :tel-validator="validatorTel"
        @save="saveAddress"
        @delete="deleteAddress"
      />
    
    </div>
  </div>
</template>

<script>
import { NavBar, AddressEdit, Toast,  } from "vant";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      title: "",
      areaList,
      addressList: [],
      addressInfo: {},
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    const addressList = JSON.parse(localStorage.getItem("addressList")) || [];
    this.addressList = addressList;
    if (this.option === "add") {
      this.title = "新增地址";
    } else {
      this.title = "修改地址";
      this.addressInfo = this.addressList[this.index];
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.onClickLeft();
    },
    //验证手机号是否规范
    validatorTel(str) {
      let reg = /^1[3|5|7|8|9]\d{9}$/;
      return reg.test(str);
    },
    //新增地址
    addAddress(content) {
      if (this.addressList.length === 0) {
        this.addressList.unshift(content);
      } else {
        if (content.isDefault) {
          this.addressList.forEach((item) => {
            item.isDefault = false;
          });
          this.addressList.unshift(content);
        } else {
          let defaultIndex = this.addressList.findIndex(
            (item) => item.isDefault
          );
          if (defaultIndex === -1) {
            this.addressList.unshift(content);
          } else {
            this.addressList.splice(1, 0, content);
          }
        }
      }
    },
    //修改地址
    editAddress(content) {
      if (content.isDefault) {
        //将其改为默认地址,并提升到第一位
        this.addressList.forEach((item) => {
          item.isDefault = false;
        });
        this.addressList.splice(this.index, 1);
        this.addressList.unshift(content)
      } else {
        //简单的替换对象即可
        this.$set(this.addressList, this.index, content);
      }
    },
    //保存
    saveAddress(content) {
      if (this.option === "add") {
        this.addAddress(content);
      } else {
        this.editAddress(content);
      }
      this.operateSuccess()
    },
    //删除地址
    deleteAddress() {
      this.addressList.splice(this.index,1)
      this.operateSuccess()
    },
    //操作成功
    operateSuccess(){
      //存到本地缓存中
      localStorage.setItem("addressList", JSON.stringify(this.addressList));
      Toast.success("新增地址成功");
      setTimeout(() => {
        this.onClickLeft();
      }, 1000);
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [AddressEdit.name]: AddressEdit,
    [Toast.name]: Toast,
   
  },
  computed: {
    option() {
      return this.$route.query.option;
    },
    index() {
      return this.$route.query.index;
    },
  },
};
</script>
<style scoped>
.update-address {
  padding-top: 46px;
  font-size: 16px;
}
.update-address >>> .van-nav-bar__content {
  background-color: #ff6a00;
}
.update-address >>> .van-nav-bar__title {
  color: #fff;
}
.update-address >>> .van-nav-bar__text,
.update-address >>> .van-icon {
  color: #fff;
}
.update-address >>> .van-button--danger {
  background-color: #42a5f5;
  border: none;
}
.update-address >>> .van-button--default {
  background-color: red;
  border: none;
  color: #fff;
}
</style>